<template>
    <div class="section">
      <h2 class="section-title">{{ title }}</h2>
      <div class="database-grid">
        <el-tooltip
          v-for="db in connections" 
          :key="db.name"
          :content="db.disabled ? '敬请期待' : ''"
          :disabled="!db.disabled"
          effect="dark"
          placement="top"
          :hide-after="10" 
        >
          <div 
            class="db-card"
            :class="{ disabled: db.disabled }"
            @click="handleCardClick(db)"
          >
            <img :src="db.logo" :alt="db.name">
            <span class="db-name">{{ db.name }}</span>
          </div>
        </el-tooltip>
      </div>
    </div>
  </template>
  
<script setup>
import { inject } from 'vue'
import { ElTooltip } from 'element-plus' 

const updateSlideDirection = inject('updateSlideDirection')

defineProps({
  title: {
    type: String,
    required: true
  },
  connections: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['select-database'])

const handleCardClick = (db) => {
  if (!db.disabled) {
    updateSlideDirection?.(-1)  // 直接调用爷爷组件的方法
    emit('select-database', db.type)
  }
}
</script>


<style scoped>

/* 数据库分类区块样式 */
.section {
  margin-bottom: 10px;                /* 区块间距 */
  background-color: #fff;
  padding: 10px;
}

/* 分类标题样式 */
.section-title {
  font-size: 18px;                    /* 分类标题字号 */
  margin-top: 0px;                /* 与卡片网格的间距 */
  margin-bottom: 10px;                /* 与卡片网格的间距 */
}

/* 数据库卡片网格布局 */
.database-grid {
  display: grid;                      /* 网格布局 */
  grid-template-columns: repeat(7, 1fr); /* 7列等宽布局 */
  gap: 8px;                           /* 网格间距 */
}

/* 数据库卡片基础样式 */
.db-card {
  display: flex;                      /* 弹性布局 */
  flex-direction: column;             /* 垂直排列 */
  align-items: center;                /* 水平居中 */
  padding: 0px;                       /* 无内边距 */
  width: 100%;                        /* 占满容器宽度 */
  height: 100%;                       /* 占满容器高度 */
  cursor: pointer;                    /* 可点击样式 */
  transition: all 0.3s;               /* 过渡动画 */
}

/* 卡片悬停效果 */
.db-card:hover {
  transform: translateY(-2px);        /* 上移动画 */
}

/* 禁用状态卡片悬停效果 */
.db-card.disabled:hover {
  opacity: 0.5;                       /* 降低透明度 */
  cursor: not-allowed;                /* 禁用指针 */
  filter: grayscale(100%);            /* 灰度效果 */
  transform: translateY(-2px);        /* 保持上移动画 */
}

/* 禁用状态卡片基础样式 */
.db-card.disabled {
  cursor: not-allowed;                /* 禁用指针 */
}

/* 数据库图标样式 */
.db-card img {
  width: 100px;                       /* 固定宽度 */
  height: auto;                       /* 高度自适应 */
  object-fit: contain;                /* 保持图片比例 */
  margin-bottom: 8px;                 /* 与文字间距 */
  padding: 8px;                       /* 内边距 */
  background-color: #fff;             /* 白色背景 */
  border: 1px solid #e4e7ed;         /* 边框 */
  border-radius: 8px;                 /* 圆角效果 */
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);  /* 阴影效果 */
  transition: all 0.3s ease;          /* 过渡动画 */
}

/* 图标悬停效果 */
.db-card:hover img {
  border-color: #0480ec;             /* 主题色边框 */
  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.15);  /* 加深阴影 */
}

/* 禁用状态的图标悬停效果 */
.db-card.disabled:hover img {
  border-color: #909399;             /* 灰色边框 */
  transform: none;                    /* 取消上浮效果 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  /* 保持原有阴影 */
}

/* 数据库名称样式 */
.db-name {
  font-size: 14px;                    /* 文字大小 */
  text-align: center;                 /* 文字居中 */
  color: #606266;                 /* 深灰文字 */
}

</style>